<template>
  <div id="My">
    <div class="userHeadInfo container-fluid">
      <div class="container userStudy">
        <div class="userPic">
          <img src="../assets/img/userpic.jpg" alt />
        </div>
        <div class="Info">
          <div class="userInfo">
            <div>{{userInfo.nickName||'默认名称'}}</div>
            <div>
              <span class="sex">{{userInfo.sex|| '男' }}</span> |
              <i class="el-icon-arrow-down"></i>更多信息
            </div>
            <div>{{'这位同学很懒，木有签名的说~'}}</div>
          </div>
          <div class="studyInfo">
            <div>
              <em>0h</em>
              <span>学习时长</span>
            </div>
            <div>
              <em>0</em>
              <span>经验</span>
            </div>
            <div>
              <em>0</em>
              <span>积分</span>
            </div>
            <div>
              <em>2</em>
              <span>关注</span>
            </div>
            <div>
              <em>0</em>
              <span>粉丝</span>
            </div>
            <div class="personalSetting el-icon-setting">
              <span @click="handleSetting">个人设置</span>
            </div>
          </div>
          <div></div>
        </div>
      </div>
    </div>
    <div class="userInfoMain container">
        <div class="Nav">
          <ul>
            <li>
              <div 
                :class="isActive == 0?'active':''"
                @click="handleSelect('/My')"
              >
                <i class="el-icon-video-play"></i>
                我的课程
              </div>
            </li>
            <li>
              <div 
                :class="isActive == 1?'active':''"
                @click="handleSelect('/My/timetableDetail/idx=1')"
              >
                <i class="el-icon-s-fold"></i>
                我的课表
              </div>
            </li>
            <li>
              <div
                :class="isActive == 2?'active':''"
                @click="handleSelect('/My/classDetail/idx=2')"
              >
                <i class="el-icon-star-off"></i>
                收藏
              </div>
            </li>
            <li>
              <div                
                :class="isActive == 3?'active':''"
                @click="handleSelect('/My/classDetail/idx=3')">
                <i class="el-icon-edit"></i>
                笔记
              </div>
            </li>
            <li>
              <div
                :class="isActive == 4?'active':''"
                @click="handleSelect('/My/classDetail/idx=4')"
              >
                <i class="el-icon-warning-outline"></i>
                猿问
              </div>
            </li>
            <li>
              <div                
                :class="isActive == 5?'active':''"
                @click="handleSelect('/My/classDetail/idx=5')">
                <i class="el-icon-document-copy"></i>
                手记
              </div>
            </li>
            <li>
              <div                
                :class="isActive == 6?'active':''"
                @click="handleSelect('/My/classDetail/idx=6')">
                <i class="el-icon-paperclip"></i>
                专栏
              </div>
            </li>
          </ul>
        </div>
        <div class="classDetail">
          <router-view></router-view>
        </div>
      </div>
  </div>
</template>

<script>
import classDetail from '../components/classDetail'

export default {
    created() {
      //获取本地存储的用户信息
      this.userInfo = JSON.parse(localStorage.getItem('data'))
      if(this.userInfo === null){
        this.userInfo = {}
      }

      let n = window.location.href.split('=')[1]
      if(n === undefined){
        n =0
      }
      this.isActive = n
      // console.log(window.location.href)
      // console.log(this.isActive)
      // console.log(this.$router.app.$route.path)
    },
    components:{
        classDetail,
      
    },
    data() {
      return {
        isActive:0,
        userInfo:{}
      }
    },
    methods: {
      //导航菜单切换
      handleSelect(path) {
          let n = path.split('=')[1]
          if(n === undefined){
            n =0
          }
            this.isActive = n
            // console.log(path)
            this.$router.push({
                path,
            })
      },
      
      //个人设置
      handleSetting (){
        // console.log(this.$router)
        this.$router.push({ 
                path:'/personalSetting'
            })
      }
    },
}
</script>

<style>
@import url("../assets/css/My.css");
</style>